import React, { useState, useEffect, useCallback } from 'react';
import {
  Card,
  Form,
  Input,
  Button,
  Space,
  message,
  Typography,
  Divider,
  Switch,
  Row,
  Col,
  Alert,
  Tag,
  Select
} from 'antd';
import {
  SettingOutlined,
  SaveOutlined,
  ReloadOutlined,
  DatabaseOutlined,
  ApiOutlined,
  DesktopOutlined
} from '@ant-design/icons';

const { Title, Text } = Typography;
const { Option } = Select;

/**
 * 配置页面组件
 * 用于管理应用的基本配置，包括 API 设置、缓存配置等
 */
const ConfigPage = ({ isMobile = false }) => {
  const [form] = Form.useForm();
  const [loading, setLoading] = useState(false);
  const [config, setConfig] = useState({
    apiUrl: 'https://api.jisuapi.com',
    enableCache: true,
    theme: 'light',
    language: 'zh-CN',
    autoSave: true
  });

  /**
   * 从本地存储加载配置
   */
  const loadConfig = useCallback(() => {
    try {
      const savedConfig = localStorage.getItem('app-config');
      if (savedConfig) {
        const parsedConfig = JSON.parse(savedConfig);
        setConfig(parsedConfig);
        form.setFieldsValue(parsedConfig);
      }
    } catch (error) {
      console.error('加载配置失败:', error);
      message.error('加载配置失败');
    }
  }, [form]);

  /**
   * 保存配置到本地存储
   */
  const saveConfig = async (values) => {
    try {
      setLoading(true);
      const newConfig = { ...config, ...values };
      
      // 保存到本地存储
      localStorage.setItem('app-config', JSON.stringify(newConfig));
      setConfig(newConfig);
      
      message.success('配置保存成功！');
    } catch (error) {
      console.error('保存配置失败:', error);
      message.error('保存配置失败');
    } finally {
      setLoading(false);
    }
  };

  /**
   * 重置配置为默认值
   */
  const resetConfig = () => {
    const defaultConfig = {
      apiUrl: 'https://api.jisuapi.com',
      enableCache: true,
      theme: 'light',
      language: 'zh-CN',
      autoSave: true
    };
    
    setConfig(defaultConfig);
    form.setFieldsValue(defaultConfig);
    localStorage.setItem('app-config', JSON.stringify(defaultConfig));
    message.info('配置已重置为默认值');
  };

  useEffect(() => {
    loadConfig();
  }, [loadConfig]);

  return (
    <div style={{ padding: isMobile ? '16px' : '24px', maxWidth: '800px', margin: '0 auto' }}>
      <Card
        title={
          <Space>
            <SettingOutlined />
            <Title level={3} style={{ margin: 0 }}>
              应用配置
            </Title>
          </Space>
        }
        style={{ marginBottom: 16 }}
      >
        <Alert
          message="配置说明"
          description="在这里可以配置应用的基本设置，包括 API 地址、主题、缓存等。Tauri 应用会将前端资源打包为静态文件，无需端口配置。"
          type="info"
          showIcon
          style={{ marginBottom: 24 }}
        />

        <Form
          form={form}
          layout="vertical"
          onFinish={saveConfig}
          initialValues={config}
        >
          {/* API 配置 */}
          <Card
            size="small"
            title={
              <Space>
                <ApiOutlined />
                <Text strong>API 配置</Text>
              </Space>
            }
            style={{ marginBottom: 16 }}
          >
            <Form.Item
              label="API 基础地址"
              name="apiUrl"
              rules={[
                { required: true, message: '请输入API地址' },
                { type: 'url', message: '请输入有效的URL地址' }
              ]}
              extra="用于彩票数据查询的 API 服务地址"
            >
              <Input placeholder="https://api.jisuapi.com" />
            </Form.Item>
          </Card>

          {/* 应用设置 */}
          <Card
            size="small"
            title={
              <Space>
                <DesktopOutlined />
                <Text strong>应用设置</Text>
              </Space>
            }
            style={{ marginBottom: 16 }}
          >
            <Row gutter={16}>
              <Col xs={24} sm={12}>
                <Form.Item
                  label="主题模式"
                  name="theme"
                >
                  <Select>
                    <Option value="light">浅色主题</Option>
                    <Option value="dark">深色主题</Option>
                    <Option value="auto">跟随系统</Option>
                  </Select>
                </Form.Item>
              </Col>
              <Col xs={24} sm={12}>
                <Form.Item
                  label="语言设置"
                  name="language"
                >
                  <Select>
                    <Option value="zh-CN">简体中文</Option>
                    <Option value="en-US">English</Option>
                  </Select>
                </Form.Item>
              </Col>
            </Row>
            <Row gutter={16}>
              <Col xs={24} sm={12}>
                <Form.Item
                  label="自动保存"
                  name="autoSave"
                  valuePropName="checked"
                  extra="自动保存用户操作和数据"
                >
                  <Switch />
                </Form.Item>
              </Col>
            </Row>
          </Card>

          {/* 缓存配置 */}
          <Card
            size="small"
            title={
              <Space>
                <DatabaseOutlined />
                <Text strong>缓存配置</Text>
              </Space>
            }
            style={{ marginBottom: 24 }}
          >
            <Form.Item
              label="启用缓存"
              name="enableCache"
              valuePropName="checked"
              extra="启用后会缓存API请求结果，提高响应速度"
            >
              <Switch />
            </Form.Item>
          </Card>

          {/* 操作按钮 */}
          <Form.Item>
            <Space size="middle">
              <Button
                type="primary"
                htmlType="submit"
                icon={<SaveOutlined />}
                loading={loading}
              >
                保存配置
              </Button>
              <Button
                icon={<ReloadOutlined />}
                onClick={resetConfig}
              >
                重置默认
              </Button>
            </Space>
          </Form.Item>
        </Form>

        <Divider />

        {/* 当前配置状态 */}
        <div>
          <Title level={4}>当前配置状态</Title>
          <Space direction="vertical" style={{ width: '100%' }}>
            <div>
              <Text strong>API地址: </Text>
              <Tag color="green">{config.apiUrl}</Tag>
            </div>
            <div>
              <Text strong>主题模式: </Text>
              <Tag color="blue">
                {config.theme === 'light' ? '浅色主题' : 
                 config.theme === 'dark' ? '深色主题' : '跟随系统'}
              </Tag>
            </div>
            <div>
              <Text strong>语言: </Text>
              <Tag color="purple">
                {config.language === 'zh-CN' ? '简体中文' : 'English'}
              </Tag>
            </div>
            <div>
              <Text strong>自动保存: </Text>
              <Tag color={config.autoSave ? 'success' : 'default'}>
                {config.autoSave ? '已启用' : '已禁用'}
              </Tag>
            </div>
            <div>
              <Text strong>缓存: </Text>
              <Tag color={config.enableCache ? 'success' : 'default'}>
                {config.enableCache ? '已启用' : '已禁用'}
              </Tag>
            </div>
          </Space>
        </div>
      </Card>
    </div>
  );
};

export default ConfigPage;